<template>
  <div>
    <div style="height: 40px;"></div>
    <center>
      <van-image
        round
        width="8rem"
        height="8rem"
        :src=images
      />
    </center>
    <center><h2>易租车</h2></center>
    <div style="height: 70px;"></div>
    <van-form @submit="onSubmit" > <!-- -->
      <van-field
        v-model="username"
        name="name"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="repassword"
        type="password"
        name="repassword"
        label="重复密码"
        placeholder="重复密码"
        :rules="[{ required: true, message: '请填写重复密码' }]"
      />
      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="0">男</van-radio>
            <van-radio name="1">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="email"
        type="username"
        name="phoneNum"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
  import Vue from 'vue';
  import {Dialog, Form} from 'vant';
  import { Field } from 'vant';
  import { Image as VanImage } from 'vant';
  import { RadioGroup, Radio } from 'vant';
  import Global from "../Global";
  import { Toast } from 'vant';
  import request from '@/utils/request'

  Vue.use(Toast);
  Vue.use(Radio);
  Vue.use(RadioGroup);
  Vue.use(VanImage);
  Vue.use(Field);
  Vue.use(Form);

  export default {
    name: "Register",
    data() {
      return {
        username: '',
        password: '',
        repassword:'',
        radio:'',
        email:'',
        images: require('@/assets/mylogo/logo3.png'),
      };
    },
    methods: {
      onSubmit(values) {
        // 对比两次密码输入是否相同
        console.log(values["password"] , values["repassword"]);
        if (values["password"] != values["repassword"]){
          Toast.fail('两次密码输入不同');
          return;
        }
        request({
          url: '/customer/register',
          method: 'post',
          data: values
        }).then(res => {
          if (res.code === 200) {
            Toast.success(res.message);
          }else {
            Toast.fail(res.message);
          }
        });
        console.log('submit', values);
      },
    },
  };
</script>

<style scoped>

</style>

